<template>
	<view class="page-content">
		<view class="page-body">
			<view class="page-main">
				<view class="page-form">
					<uni-forms ref="baseForm" :modelValue="applyForm" label-position='top'>
						<uni-forms-item label="姓名">
							<input type="text" v-model="applyForm.name" />
						</uni-forms-item>
						<uni-forms-item label="手机号：">
							<input type="text" v-model="applyForm.mobile" />
						</uni-forms-item>
						<uni-forms-item label="卡号：" v-if="form_type==1">
							<input type="text" v-model="applyForm.card_no" />
						</uni-forms-item>
						<uni-forms-item label="激活码：" v-if="form_type==1">
							<input type="text" v-model="applyForm.code" />
						</uni-forms-item>
						<uni-forms-item label="选择地区：" v-if="form_type==2">
							<!-- <input type="text" v-model="applyForm.code"  /> -->
							<view class="select_box" @click="handleSelectPop">
								<view class="select_val">
									{{addtext.join("-")}}
								</view>
								<image src="https://quanyuzhou.weimoft.com/image/input_icon.png" mode="widthFix">
								</image>
							</view>
						</uni-forms-item>

						<uni-forms-item label="选择机构：" v-if="form_type==2">
							<picker :value="institution_val" @change="handleInstitutionsChange" :range="institutions"
								range-key="name">
								<view class="select_box">
									<view class="select_val">
										{{institution_name}}
									</view>
									<image src="https://quanyuzhou.weimoft.com/image/input_icon.png" mode="widthFix">
									</image>
								</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item label="选择日期：" v-if="form_type==2">
							<uni-data-picker placeholder="选择时间段" popup-title="选择时间段" :localdata="dateTree"
								v-model="applyForm.time_interval">
							</uni-data-picker>
						</uni-forms-item>
					</uni-forms>
				</view>
			</view>
			<view class="input_pop" v-show="isShowpop">
				<view class="pop_element">
					<view class="pop_head">
						选择地区
					</view>
					<view class="pop_body">
						<view class="lists">
							<view class="items items1">
								<view class="item" :class="{active:item.id==province_val}" @click="handleGetCitys(item)"
									v-for="(item,index) in provinces" :key="index">
									{{item.name}}
								</view>

							</view>
							<view class="items items2">
								<view class="item" :class="{active:item.id==city_val}" @click="handleGetDistrict(item)"
									v-for="(item,index) in citys" :key="index">
									{{item.name}}
								</view>
							</view>

							<view class="items items2">

								<view class="item" :class="{active:item.id==district_val}" @click="handleGetlist(item)"
									v-for="(item,index) in districts" :key="index">
									{{item.name}}
								</view>
							</view>
						</view>
					</view>
					<view class="pop_footer">
						<view class="page-submit">
							<view class="btn" @click="isShowpop=false">
								提交
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="page-submit">
			<view class="btn" @click="handleSubmit">
				{{form_type==1?'激活':'立即预约'}}
			</view>
		</view>
		<multiple-select v-model="is_show" :data="institutions" :default-selected="institution_val"
			@confirm="handleConfirm"></multiple-select>
	</view>
</template>

<script>
	import multipleSelect from "../../../momo-multipleSelect/momo-multipleSelect.vue";
	import uniDataPicker from "../../../uni-data-picker/components/uni-data-picker/uni-data-picker.vue"
	export default {
		components: {
			multipleSelect,
			uniDataPicker
		},
		data() {
			return {
				form_type: 1,
				c_id: null,
				isShowpop: false,
				alignment: "top",
				applyForm: {
					store_id: "",
					date: "",
					time_interval: "",
					category_id: "",
					name: "",
					mobile: "",
					card_no: "",
					code: "",

				},
				disableColor: {
					color: "#000000",
					disableColor: "#ECFBFA",
					borderColor: "#27CEC8"
				},
				provinces: [],
				province_val: null,
				citys: [],
				city_val: null,
				districts: [],
				is_show: false,
				district_val: null,
				institutions: [],
				institution_name: "",
				institution_val: [],
				addtext: [],
				add_val: "",
				dateTree: [{
					text: "周二",
					value: "周二",
					children: [{
							text: "2024-09-24 10:00~11:00",
							value: "2024-09-24 10:00~11:00"
						},
						{
							text: "2024-09-24 10:00~11:00",
							value: "2024-09-24 10:00~11:00"
						}
					]
				}, ]
			};
		},
		onLoad(options) {
			console.log(options)
			//	type  1激活 2预约 （激活没有时间段）
			this.form_type = options.type;
			this.applyForm.category_id = options.card_id
			this.applyForm.name = options.name;
			this.applyForm.mobile = options.mobile;
		},
		mounted() {
			this.handleGetProvinces()
		},
		methods: {
			handleConfirm(data) {
				let names = data.map(item => item.label).join(",");
				this.institution_name = names;
				let vals = data.map(item => item.value).join(',');
				this.institution_val = vals
			},
			handleSubmit() {
				let _this = this;
				let applyForm = this.applyForm
				let params = {
					name: applyForm.name,
					mobile: applyForm.mobile,
					token: uni.getStorageSync("token"),
					category_id: applyForm.category_id
				}
				if (this.form_type == 2) {
					let dates = applyForm.time_interval.split(' - ');
					let date = dates[0];
					let time_interval = dates[1];
					params.date = date;
					params.time_interval = time_interval
					params.store_id = this.institution_val
				} else {
					params.card_no = applyForm.card_no;
					params.code = applyForm.code;
				}
				let is_via = Object.values(params).some(value => value === null || value === "");
				if (is_via) {
					uni.showToast({
						icon: "none",
						title: "请填写完整信息"
					})
					return false;
				}
				let urls = this.form_type == 1 ? "/bookingcard/api/card/activation" : "/bookingcard/api/card/booking"

				this.$api.sendRequest({
					url: urls,
					data: params,
					success(res) {
						if (res.code == 0) {
							uni.showToast({
								icon: "none",
								title: _this.form_type == 1 ? '激活成功' : "已经提交预约，等待2日内客服人员电话与您确认。",
								duration: 1500,
								complete() {
									setTimeout(function() {
										if (_this.form_type == 1) {
											uni.navigateTo({
												url: `/pages_service/service/index/apply/apply?type=2&card_id=${_this.applyForm.category_id}&name=${_this.applyForm.name}&mobile=${_this.applyForm.mobile}`
											})
										} else {
											uni.navigateTo({
												url: "/pages_service/service/index/index"
											})
										}
									}, 1500)
								}
							})
						} else {
							uni.showToast({
								title: res.message,
								icon: "none",
								duration: 2000,
							})
						}
					}
				})

			},
			handleInstitutionsChange(e) {
				console.log(e)
				let index = e.detail.value;
				this.institution_val = this.institutions[index].id;
				this.institution_name = this.institutions[index].name;
				if (this.form_type == 2) {
					this.handleGetBookTime()
				}

			},
			handleSelectPop() {
				this.isShowpop = true;
			},
			handleGetProvinces() {
				let _this = this;
				this.$api.sendRequest({
					url: "/api/address/lists",
					success(res) {
						console.log(res)
						_this.provinces = res.data;
					}
				})
			},
			handleGetCitys(item) {
				this.province_val = item.id;
				this.addtext[0] = item.name
				let _this = this;
				this.$api.sendRequest({
					url: "/api/address/tree?id=" + item.id,
					success(res) {
						_this.citys = res.data;
						_this.districts = []
					}
				})
			},

			handleGetDistrict(item) {
				this.city_val = item.id;
				this.addtext[1] = item.name
				let _this = this;
				this.$api.sendRequest({
					url: "/api/address/tree?id=" + item.id,
					success(res) {
						_this.districts = res.data;
					}
				})
			},
			handleGetlist(item) {
				// /bookingcard/api/store/lists?district_id=110102
				let _this = this;
				this.district_val = item.id;
				this.addtext[2] = item.name
				_this.institutions = []
				this.$api.sendRequest({
					url: `/bookingcard/api/store/lists?district_id=${item.id}&category_id=${_this.applyForm.category_id}`,
					success(res) {
						let data = res.data;
						console.log(data.length)
						if (data.length == 0) {
							uni.showToast({
								icon: "none",
								title: "当前区域没有机构"
							})
							return false;
						}
						let list = data.map(item => {
							if (_this.form_type == 1) {
								return {
									label: item.store_name,
									value: item.store_id
								}
							} else {
								return {
									name: item.store_name,
									id: item.store_id
								}
							}
						})
						_this.institutions = list
					}
				})
			},
			handleGetBookTime() {
				let _this = this;
				this.$api.sendRequest({
					url: "/bookingcard/api/store/booking_time?store_id=" + _this.institution_val,
					success(res) {
						let data = res.data;
						const dateTree = Object.keys(data).map(day => ({
							text: day,
							value: day,
							children: data[day].map(slot => ({
								text: `${slot.date} - ${slot.start}-${slot.end}`,
								value: `${slot.date} - ${slot.start}-${slot.end}`
							}))
						}));
						_this.dateTree = dateTree;
					}
				})
			},
		}
	}
</script>

<style lang="less">
	page {
		position: relative;
		height: 100vh;
		background: #27CEC8;
	}

	.page-body {
		background: #27CEC8;
		padding-bottom: 34rpx;
	}

	.page-content {
		padding-bottom: 30px;
	}

	.page-head {
		padding-top: 45px;
		font-size: 17px;
		font-weight: 500;
		color: #fff;
		text-align: center;
		height: 33px;
		line-height: 33px;
	}

	.page-main {
		padding: 0 24rpx;
		padding-top: 52rpx;

		.page-form {
			background: #fff;
			padding: 32rpx;
			border-radius: 24rpx;

			.input-item {
				label {
					font-weight: 500;
					font-size: 36rpx;
					color: #333333;
					line-height: 50rpx;
					margin-bottom: 16rpx;
				}

			}
		}
	}

	input {
		height: 90rpx;
		background: #ECFBFA !important;
		border-radius: 16rpx;
		border: 2rpx solid #27CEC8;
		line-height: 90rpx;
		padding: 0 10px;
	}

	.input-value {
		height: 90rpx !important;
		background: #ECFBFA !important;
		border-radius: 16rpx;
		border: 2rpx solid #27CEC8 !important;
		line-height: 90rpx !important;
		padding: 0 10px !important;
	}

	.uni-forms-item__label {
		width: 100% !important;
	}

	.uni-forms-item__label text {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #333333;
		width: 100% !important;
	}

	.input_pop {

		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		z-index: 9999;

		.pop_element {
			// height: 500px;
			background: #ffffff;
			border-radius: 12px 12px 0px 0px;
			position: absolute;
			bottom: 0;
			width: 100%;
			z-index: 10000;
			padding-bottom: 30rpx;

			.pop_head {
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				line-height: 90rpx;
			}

			.pop_body {

				.lists {
					display: flex;
					justify-content: flex-start;

					align-items: flex-start;

					.items {
						height: 500rpx;
						overflow-y: auto;
						width: 33%;

						.item {
							height: 88rpx;
							background: #EEEEEE;
							text-align: center;
							line-height: 88rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							padding: 0 10rpx;

							&.active {
								background: #F3F3F3;
							}
						}
					}

					.items2 {
						.item {
							background: #F3F3F3;

							&.active {
								background: #FFFFFF;
							}
						}
					}

					.items3 {
						background: #ffffff;
					}
				}
			}

			.pop_footer {
				margin-top: 12rpx;
				.page-submit{
					position: initial;
					box-shadow: none;
				}
			}
		}
	}

	.select_box {
		height: 90rpx;
		background: #ECFBFA;
		border-radius: 16rpx;
		border: 2rpx solid #27CEC8;
		position: relative;

		image {
			width: 14px;
			position: absolute;
			right: 12px;
			top: 50%;
			transform: translateY(-50%);
		}

		.select_val {
			height: 90rpx;
			line-height: 90rpx;
			padding: 0 10px;
		}
	}

	.checklist-box {
		width: calc(100vw - 400rpx);
		text-align: center;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		padding: 0 24rpx !important;

	}

	.page-submit {
		padding: 0 24rpx;
		position: fixed;
		width: 100%;
		left: 0;
		box-sizing: border-box;
		bottom: 36px;
		z-index: 9990;
		box-shadow: 0 0px 5px #afafaf4a;
		background: #fff;
		height: 156rpx;
		bottom: 0;
		padding-top: 16rpx;

		.btn {
			height: 84rpx;
			background: #27CEC8;
			border-radius: 42rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 84rpx;
			text-align: center;

		}
	}

	body .uni-forms-item {
		margin-bottom: 36rpx !important
	}
</style>